<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        .active {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <!-- 宿主文件 -->
    <div id="app">
        <h2 :title="title">
            <!-- 插值表达式！ -->
            {{title}}
        </h2>
        <!--    新增课程 -->
        <course-add v-model="course" @add-course="addCourse"></course-add>
        <!-- $event 表示传递出来的参数 -->
        <course-add :value="course" @input="course=$event" @add-course="addCourse"></course-add>

        <!--    列表组件 -->
        <course-list :courses="courses"></course-list>

        <!--    商品总数-->
        <p>
            <!--        表达式-->
            <!--        课程总数：{{courses.length + ' 门'}}-->
            <!--        使用计算属性的功能对上面的代码进行改进！-->
            <!--        课程总数：{{total}}-->

            <!--        也可以用监听器实现上面的功能！ -->
            课程总数：{{totalCount}}
        </p>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        // 课程新增组件
        Vue.component('course-add', {
            data() {
                return {
                    course: '', // 将course从父组件提取到course-add维护
                }
            },
            template:
             `
        <div>
<!-- 表单输入绑定 -->
<input v-model="course" @keydown.enter="addCourse"/>
<!-- 事件处理 -->
<button v-on:click="addCourse">新增课程</button>
</div>
`,
            methods: {
                addCourse() {
                    // 发送自定义事件通知父组件
                    // 注意事件名称定义时不要有大写字母出现
                    this.$emit('add-course', this.course)
                    this.course = ''
                }
            },
        })

        // 课程列表组件
        Vue.component('course-list', {
            data() {
                return {
                    selectedCourse: '',
                }
            },
            props: {
                courses: {
                    type: Array,
                    default: []
                }
            },
            template: `
          <div>
                      <!--    条件渲染-->
        <p v-if="courses.length == 0">没有任何课程信息！</p>

        <div class="course-list" v-else>
        <div
        :style="{backgroundColor: selectedCourse === c ? '#ddd' : 'transparent'}"
        @click="selectedCourse = c"
        v-for="c
            in courses"
        :key="c">
        <div>
        {{ c }}
        </div>
        </div>
        </div>
          </div>
        `
        })


        // 模拟异步数据调用
        function getCourses() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(['web全栈', 'web高级'])
                }, 2000)
            })
        }

        // 1、创建Vue的实例
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    title: '开课吧，购物车!',
                    courses: [],
                    totalCount: 0
                }
            },
            methods: {
                addCourse(course) {
                    // 1、添加course到数组
                    this.courses.push(course)
                }
            },
            // 我们在写程序中用的比较多的两个钩子就是created and mounted
            async created() {
                // 进入这个生命周期函数：组件实例已创建，由于未挂载，dom不存在！
                const course = await getCourses()
                this.courses = course
            },
            mounted() { },
            computed: {
                total() {
                    // 计算属性有缓存性：如果值没有发生变化，则页面不回重新渲染
                    return this.courses.length + ' 门';
                }
            },
            // 默认情况下watch初始化时不执行
            // watch: {
            //     courses(newValue, oldValue) {
            //         this.totalCount = newValue.length + ' 门'
            //     }
            // },
            // 你如果想立马看到效果的话，就得用下面这个监听器！
            watch: {
                courses: {
                    immediate: true,
                    // deep: true,
                    handler(newValue, oldValue) {
                        this.totalCount = newValue.length + ' 门'
                    }
                }
            },
        })
    </script>
</body>

</html>